<template>
  <div class="welcome-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>系统概览</span>
          </div>
          <div class="welcome-info">
            <img src="../assets/tower.png" alt="中国铁塔" class="welcome-logo">
            <div class="welcome-text">
              <h1>欢迎使用铁塔财务部智能化报销管控平台</h1>
              <p>本平台旨在解决私车公用报销和招待费用报销中的问题，提高报销管理的规范性和透明度。</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>私车公用业务智能化管控</span>
          </div>
          <div class="feature-list">
            <div class="feature-item">
              <i class="el-icon-s-claim"></i>
              <div class="feature-info">
                <h3>用车合规性验证</h3>
                <p>验证人、车、里程，对里程进行检验，检验后输出结果，并留痕。</p>
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-s-order"></i>
              <div class="feature-info">
                <h3>连续性检验规则</h3>
                <p>检建里程台账，系统强制检验当前申报终止里程值大于上次历史记录值。</p>
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-money"></i>
              <div class="feature-info">
                <h3>金额逻辑验证</h3>
                <p>实时计算（终止里程-起始里程）×标准单价，与申报金额进行数值一致性校验。</p>
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-s-cooperation"></i>
              <div class="feature-info">
                <h3>时空中央控制</h3>
                <p>对接差旅管理系统获取员工外勤时段数据，当私车公用报告与差旅时段存在重叠时，自动触发控制措施。</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="12">
        <el-card>
          <div slot="header" class="clearfix">
            <span>招待费用电子凭证管控</span>
          </div>
          <div class="feature-list">
            <div class="feature-item">
              <i class="el-icon-upload"></i>
              <div class="feature-info">
                <h3>电子凭证采集</h3>
                <p>支持多格式文件上传（JPEG/PDF）支付凭证、发票。</p>
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-s-claim"></i>
              <div class="feature-info">
                <h3>智能票据鉴真中心</h3>
                <p>系统使用AI识别查看PS痕迹，金额是否一致，电子凭证防伪处理。</p>
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-document-checked"></i>
              <div class="feature-info">
                <h3>结果输出</h3>
                <p>结果使用特殊水印显示，防止二次更改。</p>
              </div>
            </div>
            <div class="feature-item">
              <i class="el-icon-time"></i>
              <div class="feature-info">
                <h3>历史结果查重存</h3>
                <p>可通过特定字段对历史结果进行查询。</p>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Welcome'
}
</script>

<style scoped>
.welcome-container {
  padding: 20px 0;
}

.welcome-info {
  display: flex;
  align-items: center;
}

.welcome-logo {
  width: 120px;
  margin-right: 30px;
}

.welcome-text h1 {
  font-size: 24px;
  color: #1890ff;
  margin-bottom: 15px;
}

.welcome-text p {
  font-size: 16px;
  line-height: 1.6;
  color: #606266;
}

.feature-list {
  padding: 10px 0;
}

.feature-item {
  display: flex;
  margin-bottom: 20px;
}

.feature-item i {
  font-size: 24px;
  color: #1890ff;
  margin-right: 15px;
  margin-top: 5px;
}

.feature-info h3 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: #303133;
}

.feature-info p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}
</style> 